<template>
	<div class="page-container">
		<!--新增编辑界面-->
		<el-dialog :title="add ? '物料出库新增' : '物料出库编辑'" width="80%" :visible.sync="dialogVisible" custom-class="myHeadClass"
			:close-on-click-modal="false" @opened="getDetials" :before-close="handleClose">

			<div style="float:left;">
				<el-form :model="subDataForm" label-width="80px" :inline="true" :rules="dataFormRules" ref="dataForm"
					size="mini" label-position="right">
					<el-form-item label="ID" prop="id" v-if="false">
						<el-input v-model="subDataForm.id" disabled="true" auto-complete="off"></el-input>
					</el-form-item>

					<el-form-item :label="$t('field.do.doNo')" prop="doNo">
						<el-input v-model="subDataForm.doNo" auto-complete="off"></el-input>
					</el-form-item>
					<s-dict-form :min="10" :max="90" :key="subDataForm.doType" name="doType" :value="subDataForm.doType"
						v-model="subDataForm.doType" />
					<el-form-item :label="$t('field.do.remark')" prop="remark">
						<el-input v-model="subDataForm.remark" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="项目号" prop="code">
						<el-input v-model="subDataForm.batchNo" auto-complete="off" @change="changeColor"></el-input>
					</el-form-item>
				</el-form>
			</div>


			<div class="app-container">
				<el-table v-loading="listLoading" :key="componentKey" :data="dto.detList" height="350" border fit
					highlight-current-row style="width: 100%" size="mini"  :cell-style="myclass"  >
					<el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
						<template slot-scope="scope"> {{ scope.$index + 1 }} </template>
					</el-table-column>
					<el-table-column class-name="status-col" :label="$t('field.itemName')" min-width="110" prop="itemId"
						align="center" header-align="center" :formatter="itemFilter">

					</el-table-column>
					<el-table-column width="100px" :label="$t('field.planCount')" align="center" header-align="center">

						<template slot-scope="{row}">
							<template v-if="row.edit">
								<el-input v-model="row.planCount" class="edit-input" size="mini" />
							</template>
							<span v-else style="cursor: pointer;">{{ row.planCount }}</span>
						</template>

					</el-table-column>
					<el-table-column width="100px" label="单位" align="center" header-align="center">

						<template slot-scope="{row}">
							<template v-if="false">
								<s-dict-select name="units" v-model="row.unit" />
							</template>
							<span v-else style="cursor: pointer;" v-for="(item, index) in units">
								<span v-if="item.value == row.unit">{{ item.label }}</span>
							</span>
						</template>

					</el-table-column>
					<column prop="activeCount" label="明细" width="80" />
					<column prop="finshCount" label="完成" width="80"  :formatter="cvFormat" /> 
					<el-table-column align="center" :label="$t('action.edit')" width="80" fixed="right">
						<template slot-scope="{row}">
							<el-button v-if="row.edit" type="text" size="mini" @click="tableChange(row)">
								{{ $t('action.comfirm') }}
							</el-button>
							<el-button v-else type="text" v-if="!row.edit&&(subDataForm.id==0||subDataForm.status==1||subDataForm.status==2)"  size="mini" @click="tableChange(row)">
								{{ $t('action.edit') }}
							</el-button>
						</template>
					</el-table-column> 
					<el-table-column :label="$t('action.operation')" width="105" fixed="right" header-align="center"
						align="center">
						<template slot-scope="scope">
							<el-button  perms="doo:item:delete" v-if="subDataForm.status==1" type="text" size="mini" @click="handleSelectDet(scope.row)">
								指定
							</el-button>
							<kt-delete-button perms="doo:item:delete"  v-if="subDataForm.status==1||subDataForm.status==2" @click="handleDelete(scope.$index, scope.row)" />
						</template>
					</el-table-column>

				</el-table>
			</div>
			<div slot="footer" class="dialog-footer">

				<el-button size="mini" type="primary" @click.native="submitForm" v-if="subDataForm.id==0||subDataForm.status==1||subDataForm.status==2" :loading="editLoading">{{
					$t('action.submit') }}</el-button>
				<el-button size="mini" @click.native="handleAddDetailEdit" v-if="subDataForm.id==0||subDataForm.status==1||subDataForm.status==2">增加明细 </el-button>
			</div>

		</el-dialog>
		<item-select :itemDialogVisible="itemDialogVisible" @handleSelect="handleSelect"
			@itemHidden="itemHidden"></item-select>

		<select-det :selectDetVisible="selectDetVisible"   :myParam="selectItem"  @handleSelect="handleSelect"
			@selectDetClose="selectDetHidden"></select-det>

	</div>
</template>

<script>

import KtButton from "@/views/Core/KtButton"
import { format } from "@/utils/datetime"
import Column from "@/views/Core/Column"
import SDictForm from "@/components/Kj/SDictForm"
import { dictsFormat, getItemName } from "@/utils/myUtil"
import SDictSelect from "@/components/Kj/SDictSelect"
import ItemSelect from "@/views/Basic/Material/ItemSelect"
import KtDeleteButton from "@/views/Core/KtDeleteButton"
import SelectDet from "./SelectDet"
export default {
	name: 'DooItem',
	components: {
		SDictSelect,
		KtButton,
		ItemSelect, 
		SDictForm,
		Column, 
		KtDeleteButton,
		SelectDet
	},

	props: {

		subDataForm: {
			type: Object
		},
		dialogVisible: {
			type: Boolean
		},
		add: {
			type: Boolean
		}
	},

	data() {
		return {
			size: 'mini',
			listLoading: false,
			dto: { detList: [], deleteIds: [] },

			units: [],
			pageResult: {},
			componentKey: 0,
			editLoading: false,
	 
			itemDialogVisible: false,
			selectDetVisible:false,
			selectItem:{},
			selectItemComponentKey: 0,
		}
	},
	computed: {
		dataFormRules() {
			const dataFormRules = {

				doNo: [{ required: true, message: "请输入单据号", trigger: 'blur' }],
				doType: [{ required: true, message: "请选择类型", trigger: 'blur' }],
			};
			return dataFormRules;
		}
	},
	methods: {
		myclass:function({ row, column, rowIndex, columnIndex }){
			
		    debugger
			if(! row.itemName){
				return ""
			}
			if( row.itemName.indexOf(this.subDataForm.code)!=-1){ 
				return "color:red ;font-weight:bold"
			}else{
				return "";

			}
		

		},

		itemFilter: function (row, column, cellValue, index) {
			var v= getItemName(cellValue);
		    return v;
		},
		changeColor:function(){
			debugger
			if(this.subDataForm.code.length>4){
				this.componentKey+=1;

			}
		
		},
		handleDelete: function (index, row) {
			if (this.subDataForm.id > 0) {
				this.$api.doo.deleteDetial(row).then((res) => {
					if (res.code == 200) {
						if (row.id > 0) {
							this.dto.deleteIds.push(row.id)
						}
						this.dto.detList.splice(index, 1)

					} else {
						this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
					}

				})
			}
			else {
				if (row.id > 0) {
					this.dto.deleteIds.push(row.id)
				}
				this.dto.detList.splice(index, 1)
			}

		},
		handleSelect: function (data) {
			for (var i = 0; i < data.length; i++) {
				this.dto.detList.push({ itemId: data[i].id, unit: data[i].unit, edit: false });
			}
			this.itemHidden();


		},
		dictColumn: function (row, column, cellValue, index) {
			return dictsFormat("units", row.unit)
		},
		handleClose: function (done) {
			this.dto = { detList: [], deleteIds: [] };
			this.$emit('receiptHidden', {})
			done();
		},
		itemHidden: function () {
			this.itemDialogVisible = false;
		},
		// 获取分页数据
		getDetials: function () {
			if (this.subDataForm == undefined || this.subDataForm.id == undefined || this.subDataForm.id == 0) {
				return;
			}
			this.listLoading = true
			this.$api.doo.getDetials(this.subDataForm).then((res) => {
				const items = res.data
				this.dto.detList = items.map(v => {
					this.$set(v, 'edit', false)
					var itemName= getItemName(v.itemId);
					this.$set(v, 'itemName', itemName)
					return v
				})
				this.listLoading = false
				//this.componentKey += 1;
			})
		},

		tableChange: function (row) {
			row.edit = !row.edit;
		
			//this.componentKey += 1;

		},

		handleSelectDet: function (row) {
 			this.selectItem=row;
			this.selectDetVisible=true;
			
			this.selectItemComponentKey+= 1;

		},

		selectDetHidden: function (row) {
	 
			this.selectDetVisible=false;

		},
		cvFormat: function (row, column, cellValue, index) { 
			if(row.cv>0){ 
				return "["+cellValue+"]"
			}else{
				return cellValue 
			}
		
		},
		handleAddDetailEdit: function () {
			//this.componentKey += 1;
			this.itemDialogVisible = true

		},
		handleHiddenOut: function (params) {
			this.$emit('receiptHidden', {})
		},
		// 编辑
		submitForm: function () {
	 
			if (this.subDataForm.status == 2 || this.subDataForm.status == 3) {
				this.$message({ message: "出库单非待执行状态无法修改", type: 'error' })
			} else {

				this.$refs.dataForm.validate((valid) => {
					if (valid) {
						this.$confirm(this.$t('action.isConfirm'), this.$t('action.tips'), {}).then(() => {
							this.editLoading = true
							this.dto.main = this.subDataForm;
							this.dto.main.outType = 2000;
							this.$api.doo.saveDoo(this.dto).then((res) => {
								this.editLoading = false
								if (res.code == 200) {

									this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
									this.handleHiddenOut();

								} else {
									this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
								}

							})
						})
					}
				})
			}
		}



	},
	created() {
		var d = this.$store.state.dict;

		this.units = d.dicts["units"];
	}
}
</script>

<style scoped>
.myHeadClass .el-dialog__header {
	background-color: #ff00ff !important;
	;
}
</style>